<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
  msg: String,
  data: {
    type: Object,
    required: true
  }
})
console.log('props=>data', props.data)
// 1.初始化echarts实例
let myChart = null
const target = ref(null)

onMounted(() => {
  myChart = echarts.init(target.value)
  renderChart()
})

// 2.构建option配置对象
const renderChart = () => {
  const options = {
    // X轴展示数据
    xAxis: {
      show: false, // 是否显示X轴
      type: 'value', // X轴是否作为数据进行展示
      max: function(value) {
        return parseInt(value.max * 1.2)
      }
    },
    // Y轴展示数据
    yAxis: {
      type: 'category', // value\category\time\log
      data: props.data.map(item => item.name),
      inverse: true, // 是否是反向坐标轴
      axisLine: { // 坐标轴轴线相关设置
        show: false
      },
      axisTick: { // 坐标轴刻度相关设置
        show: false
      },
      axisLabel: {
        color: '#9eb1c8'
      }
    },
    // 图表绘制的位置，对应上下左右
    grid: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      containLabel: true
    },
    // 核心配置
    series: [{
      type: 'bar', // 图表类型
      data: props.data.map(item => ({
        value: item.value,
        name: item.name
      })),
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      itemStyle: {
        color: '#479ad3',
        barBorderRadius: 5,
        shadowColor: 'rgba(0, 0, 0, 0.3)',
        shadowBlur: 5
      },
      barWidth: 12,
      label: {
        show: true,
        position: 'right',
        textStyle: {
          color: '#fff'
        }
      }
    }]
  }
  // 3. 通过实例setOptions(options)
  myChart.setOption(options)
}

watch(
  () => props.data,
  () => {
    renderChart()
  }
)
</script>

<template>
  <div>
    <div>【大区数据信息】</div>
    <!-- bg-[#38bdf8]" -->
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
